<template>
	<div class="allcontainer" v-loading="loading">
		<div class="h2">活动大厅  {{ $route.query.Name?'●'+$route.query.Name:'' }}
			{{ $route.query.progress?' ● '+stateList.filter(m=>m.Key==$route.query.progress)[0].Value:'' }}</div>
		<div class="bg-white">
			<div id="components-form-demo-advanced-search">
				<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
					<a-row :gutter="24">
						<a-col :span="8">
							<a-form-item label="名称">
								<a-input autocomplete="off" class="field-right" placeholder="请输入名称搜索"
								v-decorator="[`key`]" />
							</a-form-item>	
						</a-col>
						<a-col :span="8">
						<a-form-item label="课程类型">
							<a-tree-select :allowClear="true" show-search
								v-decorator="['typeID']"
								:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								:tree-data="ActivityTypeApplyList" tree-default-expand-all :replace-fields="replaceFields"
								placeholder="请先选择课程类型" @change="selectChange"></a-tree-select>
						</a-form-item>
						</a-col>
						<a-col class="option" :span="8">
							<a-button type="primary" html-type="submit">搜索</a-button>
							<a-button @click="handleReset">重置</a-button>
							<span class="more-search" @click="isMore=!isMore">高级筛选　<i>{{isMore?'⤧':'⤩'}}</i></span>
						</a-col>
						<div style="margin-top: 70px;" v-show="isMore">
							<!-- <a-col :span="8">
								<a-form-item label="活动类型">
									<template>
										<a-select v-decorator="['typeID']" showSearch optionFilterProp="children"
											style="width: 100%" :filterOption="filterOption" placeholder="请输入关键字进行搜索"
											allowClear>
											<a-select-option v-for="(item, index) in typeList" :key="item.ID">
												{{ item.Name }}</a-select-option>
										</a-select>
									</template>
								</a-form-item>
							</a-col> -->
							<a-col :span="8">
								<a-form-item label="学生组织/班级">
									<template>
										<a-select v-decorator="['clubID']" showSearch optionFilterProp="children"
											style="width: 100%" :showArrow="false" @search="fetchClub"
											:filterOption="filterOption" placeholder="请输入关键字进行搜索" allowClear>
											<a-select-option v-for="(item, index) in ClubList" :key="item.ID">
												{{ item.Name }}</a-select-option>
										</a-select>
									</template>
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="时间">
									<a-range-picker v-decorator="['data']" />
								</a-form-item>
							</a-col>
						</div>
					</a-row>
				</a-form>
			</div>
			<div class="table">
				<el-table stripe ref="singleTable" :data="AllActivityList" highlight-current-row style="width: 100%">
					<el-table-column prop="No" label="编号" width="120" fixed="left" align="center"></el-table-column>
					<el-table-column prop="Title" label="名称" min-width="100" fixed="left">
						<template slot-scope="scope">
							<div class="allowclick" @click="seedetail(scope.row)">
								{{ scope.row.Title || scope.row.TypeItemName }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="ClassName" label="学生组织/班级" min-width="100" align="center">
						<template slot-scope="scope">
							{{ scope.row.ClassName || scope.row.ClubName }}
						</template>
					</el-table-column>
					<el-table-column prop="ClassName" label="课程名称" min-width="100" align="center">
						<template slot-scope="scope">
							{{ scope.row.TypeName }}
						</template>
					</el-table-column>
					<el-table-column prop="StartTime" label="活动时间" min-width="120" align="center">
						<template slot-scope="scope">
							<div>始：{{ scope.row.StartTime }}</div>
							<div>终：{{ scope.row.EndTime }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="ApplyNum" label="报名人数" min-width="120" align="right">
						<template slot-scope="scope">
							{{ scope.row.IsNeedApply?scope.row.ApplyNum:'无需报名' }}
						</template>
					</el-table-column>
					<el-table-column prop="MemberNum" label="参与人数" min-width="120" align="right"></el-table-column>
					<el-table-column prop="IsEnable" label="操作" width="130" v-if="$route.query.progress==1">
						<template slot-scope="scope">
							<div class="user-btn user-btn-auto">
								<span class="join" v-if="new Date().getTime() < new Date(scope.row.EndTime.replace(/-/g, '/')).getTime() && scope.row.State != 5 && scope.row.IsNeedApply" @click="AllJoinActivity(scope.row)">加入活动</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pagination.currentPage" :page-sizes="pagination.pageSizeOptions"
				:page-size="pagination.pageSize" layout="total, prev, pager, next,sizes, jumper"
				:total="pagination.total"></el-pagination>
		</div>
		<addActivity v-if="showModal" @closeFun="closeFun(1)"></addActivity>
		<detailActivity v-if="detailshowModal" :text="text" @closeFun="closeFun(1)"></detailActivity>
		<applyActivity :text="text" :time="time" v-show="applyshowModal" @closeFun="closeFun(1)"></applyActivity>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		GetActivityPageList,
		UserActivityDoGetClassPageList,
		GetClubPageListCommon,
		DoGetCommonClubOrClassPageList,
		GetActivityTypeList,
		DoGetActivityFlowTypeListCommon,
		ManageCreditFlowTypeDoGetList
	} from '@/api/follow';
	import addActivity from './addActivity.vue';
	import detailActivity from './detailActivity.vue';
	import applyActivity from '@/components/ApplyActivity';
	import Cache from '@/utils/cache';
	import moment from 'moment';
	export default {
		components: {
			addActivity,
			detailActivity,
			applyActivity
		},
		data() {
			return {
				ActivityTypeApplyList:[],
				replaceFields: {
					children: 'children',
					title: 'title',
					key: 'ID',
					value: 'ID'
				},
				ActivityTypeData: [],
				isMore:false,
				form: this.$form.createForm(this, {
					name: 'search'
				}),
				requestUrl: this.global.requestUrl,
				callback(key) {},
				ClubList: [],
				typeList: [],
				AllActivityList: [],
				showModal: false,
				loading: false,
				detailshowModal: false,
				applyshowModal: false,
				text: {},
				time: '',
				list: [],
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				values: {},
				currentTypeID: this.$route.query.ID,
				stateList: this.global.stateList
			};
		},
		created() {
			this.getList();
			this.getOtherList();
			this.getOtherList1()
		},
		computed: {},
		methods: {
			selectChange(e){
				
			},
			moment,
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			async getOtherList1() {
				let res = await DoGetActivityFlowTypeListCommon();
				this.ActivityFlowTypeList = res.data.data;
				// let res1 = await ManageCreditFlowTypeDoGetList();
				// this.CreditFlowTypeData=res1.data.data;
				// console.log(this.CreditFlowTypeData);
				// let res1 = await GetClubTypeList()
				// let arr = [{ID: "Class",Name: "班级"}]
				// this.ClubTypeList = arr.concat(res1.data.data)
				let res2 = await GetActivityTypeList()
				this.ActivityTypeData = res2.data.data
				this.ActivityTypeApplyList= res2.data.data
				this.ActivityTypeApplyList = this.ActivityTypeApplyList.map(item => {
					return {
						...item,
						title: item.Name,
						// disabled: item.IsApply ? false : true
					};
				});
				this.ActivityTypeApplyList = this.toTree(this.ActivityTypeApplyList);
				console.log(this.ActivityTypeApplyList);
				
			},
			toTree(data) {
				let result = [];
				let map = {};
				if (!Array.isArray(data)) {
					return [];
				}
				data.forEach(item => {
					map[item.ID] = item;
				});
				data.forEach(item => {
					let parent = map[item.ParentID];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			},
			async getOtherList() {
				let res = await GetActivityTypeList();
				this.typeList = res.data.data;
			},
			async fetchClub(value) {
				let myReg = /^[^a-zA-Z]+$/;
				if (value && value.length > 1) {
					let data = {};
					data.key = value;
					let res = await DoGetCommonClubOrClassPageList(data);
					this.ClubList = res.data.data;
				}
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					if (values.data && values.data.length > 0) {
						values.startTime = values.data[0].format('YYYY-MM-DD');
						values.endTime = values.data[1].format('YYYY-MM-DD');
					}
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			seedetail(t) {
				this.text = t;
				this.detailshowModal = !this.detailshowModal;
			},
			AllJoinActivity(t) {
				this.text = t;
				this.time = new Date();
				this.applyshowModal = !this.applyshowModal;
			},
			async getList() {
				let data = {};
				this.loading = true;
				data = this.values;
				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				data.progress = this.$route.query.progress;
				let res = {}
				if (this.$route.query.ID == 'class') {
					res = await UserActivityDoGetClassPageList(data)
				} else {
					data.typeID = data.typeID ? data.typeID : this.$route.query.ID;
					data.isClass = false
					res = await GetActivityPageList(data);
				}
				this.AllActivityList = res.data.code == 0 ? res.data.data : [];
				const pagination = {
					...this.pagination
				};
				pagination.total = res.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
				this.loading = false;
			},
			closeFun(index) {
				this.showModal = false;
				this.detailshowModal = false;
				this.applyshowModal = false;
				if (index === 1) {
					this.getList();
				}
			}
		}
	};
</script>
<style scoped lang="less">
	/deep/.ant-form-item-label{
		width: 110px !important;
	}
</style>
